<template>
    <div class="player-list-container">
        <!-- 右边玩家 -->
        <div v-if="!hidePlayer && showRightPlayers" class="right" :style="{ height: rightContainerHeight }">
            <transition-group name="player">
                <Player v-for="item in sortedRightPlayer" :key="item.player_id" :item="item" :scale="scale" />
            </transition-group>
        </div>
        
        <!-- 左边玩家 -->
        <div v-if="!hidePlayer && showLeftPlayers" class="left" :style="{ height: leftContainerHeight }">
            <transition-group name="player">
                <Player v-for="item in sortedLeftPlayer" :key="item.player_id" :item="item" :scale="scale" />
            </transition-group>
        </div>
    </div>
</template>

<script setup>
import Player from './Player.vue';
import { computed, defineProps } from 'vue';

const props = defineProps({
    leftPlayer: {
        type: Array,
        default: () => []
    },
    rightPlayer: {
        type: Array,
        default: () => []
    },
    hidePlayer: {
        type: Boolean,
        default: false
    },
    showLeftPlayers: {
        type: Boolean,
        default: true
    },
    showRightPlayers: {
        type: Boolean,
        default: true
    }
});

// 排序后的玩家数据
const sortedLeftPlayer = computed(() => {
    return [...props.leftPlayer].sort((a, b) => b.sortValue - a.sortValue);
});

const sortedRightPlayer = computed(() => {
    return [...props.rightPlayer].sort((a, b) => b.sortValue - a.sortValue);
});

// 总玩家数
const totalPlayerCount = computed(() => {
    return props.leftPlayer.length + props.rightPlayer.length;
});

// 缩放比例
const scale = computed(() => {
    const size = totalPlayerCount.value;
    if (size <= 13) return 1;
    const extraPlayers = size - 13;
    const scaleReduction = Math.floor(extraPlayers) * 0.03;
    return Math.max(0.7, 1 - scaleReduction);
});

// 计算单个玩家高度
const playerHeight = computed(() => {
    const s = scale.value;
    const baseHeight = 36; // 头像和文本的最大高度
    const padding = 2 * s * 2;
    const border = 2 * s * 2;
    const marginBottom = 1 * s;
    return baseHeight * s + padding + border + marginBottom;
});

// 计算左右容器高度
const leftContainerHeight = computed(() => {
    return sortedLeftPlayer.value.length * playerHeight.value + 'px';
});

const rightContainerHeight = computed(() => {
    return sortedRightPlayer.value.length * playerHeight.value + 'px';
});
</script>

<style scoped>
.player-list-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

.left,
.right {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
}

.players {
    display: grid;
    grid-template-columns: 1fr;
    gap: .3125rem;
    max-width: 6.875rem;
}

.two-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 13.8125rem;
}

.player-enter-active,
.player-leave-active,
.player-move {
    transition: all 0.5s ease;
}

.player-enter-from,
.player-leave-to {
    opacity: 0;
    transform: translateY(1.875rem);
}

.player-leave-active {
    position: absolute;
}
</style> 